Repository navigation
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5248 +/- ##
==========================================
- Coverage 97.82% 97.82% -0.01%
==========================================
Files 1006 1006
Lines 32621 32648 +27
Branches 12117 12133 +16
==========================================
+ Hits 31913 31939 +26
- Misses 666 703 +37
+ Partials 42 6 -36 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The tab styling clips keyboard focus rings when custom padding is zero and leaves separators visible over filled tab backgrounds.
2 open issues
What changed in this PR
Moves tab painting from the link to the container, preparing Tabs for the upcoming internal style API while aiming to preserve default rendering and interaction geometry.
Changes:
- Moves backgrounds, borders, block padding, and state typography to the container; keeps inline padding on the trigger.
- Adjusts trigger, action, and dismiss styles to compensate for the moved styles.
- Updates style tests and adds disabled-tab examples.
| File | Description |
|---|---|
src/tabs/tab-header-bar.tsx |
Applies styles to the container and trigger separately. |
src/tabs/tab-header-bar.scss |
Moves painting and state styles; adjusts child spacing and inheritance. |
src/tabs/styles.tsx |
Adds a trigger-specific inline-padding helper. |
src/tabs/__tests__/tabs.test.tsx |
Tests style placement on rendered elements. |
src/tabs/__tests__/styles.test.tsx |
Covers the new helper and non-core behavior. |
src/tabs/__tests__/__snapshots__/styles.test.tsx.snap |
Updates snapshots for the split style mapping. |
pages/tabs/actions.page.tsx |
Adds disabled tabs with text actions and dismiss buttons. |
Review effort: Balanced
| line-height: awsui.$line-height-tabs; | ||
| font-weight: awsui.$font-weight-tabs; | ||
| color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-interactive-default); | ||
| background-color: var(#{custom-props.$styleBackgroundDefault}, transparent); |
vvaliyev
force-pushed
the
style-v2-tabs-refactor
branch
from
November 4, 2026 13:48
65e23a4 to
1a13586
Compare
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The padding logic misaligns action/dismiss controls with font-relative padding and differing tab/body font sizes, and invalidates padding and cancellation margins for variable-backed two-value padding.
3 open issues
1 resolved since last review
Review effort: Balanced
| if (current) { | ||
| parts.push(current); | ||
| } | ||
| return [parts[0], parts[1] ?? parts[0]]; |
| margin-block-start: calc(-1 * #{$tab-padding-block-start}); | ||
| margin-block-end: calc(-1 * #{$tab-padding-block-end}); | ||
| // The colour and font of the tab apply to its label only. | ||
| @include styles.default-text-style; |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Moves the tab's painted styles (background, border, border radius, block padding, colour and font per state) from the tab link to the tab container, so one element paints the tab and the upcoming internal style API can target it. The link, the action and the dismiss button cancel the moved block padding with negative margins, so the link keeps its size, focus ring and click area, and the action and dismiss button keep their own text style.
style.tab.paddingBlockmoves to two custom properties,styleTabsPaddingBlockStartandstyleTabsPaddingBlockEnd, so the moved padding and the negative margins follow it. Adding them changes the hash suffix of all custom properties, which updates the style snapshots of other components.Visible changes:
@cloudscape-design/global-styles, button tab labels inherit the font family instead of using the browser default.style.tab(core system only):backgroundColor,borderColorandborderRadiuspaint the whole tab, including its inline padding, the action and the dismiss button, so adjacent tabs touch. The separator stays visible over a coloured tab, inside its end border. Hover colours still apply only while the pointer is over the link.style.tab.borderWidthsets the tab's outer border. The label and the tab size stay the same; with a width other than 1px the underline and the separators move inside by the difference.style.tab.paddingBlock: no change. The link, the action and the dismiss button follow the set padding, so the label, the tab size, the focus ring and the click area are as before.Related links, issue #, if available: n/a
How has this been tested?
Unit tests, and a pixel comparison of the Tabs dev pages against main at rest, hovered, focused and active: classic and One Theme in both densities; visual refresh in both densities, light and dark, LTR and RTL. The label, link, focus ring and tab boxes with
style.tab.paddingBlockof 0px, 4px and 4px 8px match main in classic and visual refresh.Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.